<template>
  <div class="question-box">
    <!-- <NavBar></NavBar> -->
    <div class="time-down">{{ time }}</div>
    <div class="question">
      <div class="title">开始答题</div>
      <div class="question-container">
        <div class="question-num">
          第{{ currentNum + 1 }}题 {{ judgeType() }}
        </div>
        <div class="question-title">
          {{
            currentNum +
            1 +
            "." +
            questionList[currentNum].sysExamQuestion.questionName
          }}
        </div>

        <div
          class="answer"
          v-if="
            questionList[currentNum].sysExamQuestion.questionType === 'j' ||
            questionList[currentNum].sysExamQuestion.questionType === 'k'
          "
        >
          <div
            :class="canChose('A') ? 'answer-item chose-answer' : 'answer-item'"
            v-if="questionList[currentNum].sysExamQuestion.questionOpa"
            @click="choseAnswer('A')"
          >
            A.{{ questionList[currentNum].sysExamQuestion.questionOpa }}
          </div>
          <div
            :class="canChose('B') ? 'answer-item chose-answer' : 'answer-item'"
            v-if="questionList[currentNum].sysExamQuestion.questionOpb"
            @click="choseAnswer('B')"
          >
            B.{{ questionList[currentNum].sysExamQuestion.questionOpb }}
          </div>
          <div
            :class="canChose('C') ? 'answer-item chose-answer' : 'answer-item'"
            v-if="questionList[currentNum].sysExamQuestion.questionOpc"
            @click="choseAnswer('C')"
          >
            C.{{ questionList[currentNum].sysExamQuestion.questionOpc }}
          </div>
          <div
            :class="canChose('D') ? 'answer-item chose-answer' : 'answer-item'"
            v-if="questionList[currentNum].sysExamQuestion.questionOpd"
            @click="choseAnswer('D')"
          >
            D.{{ questionList[currentNum].sysExamQuestion.questionOpd }}
          </div>
        </div>

        <div
          class="answer"
          v-if="questionList[currentNum].sysExamQuestion.questionType === 'l'"
        >
          <div
            :class="canChose('T') ? 'answer-item chose-answer' : 'answer-item'"
            v-if="questionList[currentNum].sysExamQuestion.questionOpa"
            @click="choseAnswer('T')"
          >
            {{ questionList[currentNum].sysExamQuestion.questionOpa }}
          </div>
          <div
            :class="canChose('F') ? 'answer-item chose-answer' : 'answer-item'"
            v-if="questionList[currentNum].sysExamQuestion.questionOpb"
            @click="choseAnswer('F')"
          >
            {{ questionList[currentNum].sysExamQuestion.questionOpb }}
          </div>
        </div>
      </div>

      <div
        v-if="
          questionList[currentNum].sysExamQuestion.questionType === 'm' ||
          questionList[currentNum].sysExamQuestion.questionType === 'n' ||
          questionList[currentNum].sysExamQuestion.questionType === 'r' ||
          questionList[currentNum].sysExamQuestion.questionType === 's'
        "
      >
        <el-input
          style="margin-bottom: 20px"
          type="textarea"
          :autosize="{ minRows: 3, maxRows: 4 }"
          placeholder="请作答"
          v-model="answerList[currentNum]"
          @input="changeInput"
        >
        </el-input>
      </div>

      <div class="pre-next">
        <div class="chose">
          {{ currentNum + 1 }} / {{ questionList.length }}
          <el-dropdown trigger="click" placement="top">
            <span class="el-dropdown-link">
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                v-for="(item, index) in answerList"
                :key="index"
                :style="
                  item != null
                    ? 'color: #409eff; background: #ecf5ff; border-color: #b3d8ff;'
                    : ''
                "
                @click.native="changeNum(index)"
                >{{ index + 1 }}</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div style="float: right">
          <el-button type="primary" @click="pre">上一题</el-button>
          <el-button type="primary" @click="next">下一题</el-button>
        </div>
      </div>
      <div class="submit" @click="submit">
        <el-button type="success">提交</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { questionList } from "@/api";
// import NavBar from "@/components/NavBar";
import { mapState } from "vuex";

export default {
  data() {
    return {
      questionList: null,
      currentQuestion: null,
      currentNum: 0,
      answerList: [],
    };
  },
  mounted() {
    // console.log(this.answerList === null);
    questionList(this.$route.query.id).then((res) => {
      this.start()
      this.questionList = res;
      this.currentQuestion = this.questionList[this.currentNum];
      this.answerList = new Array(this.questionList.length);
      for (let i = 0; i < this.answerList.length; i++) {
        this.answerList[i] = null;
      }
      this.$store.commit("exam/setAnswerList", this.answerList);
      if (this.$store.state.exam.currentID != "") {
        if (this.$store.state.exam.currentID != this.$route.query.id) {
          this.$alert("请回到您未完成的考试中", "这不是您当前的考试试卷", {
            confirmButtonText: "确定",
            callback: (action) => {
              this.$router.go(-1);
            },
          });
        } else {
          this.answerList = JSON.parse(
            JSON.stringify(this.$store.state.exam.answerList)
          );
        }
      } else {
        // console.log(1);
        this.$store.commit("exam/setID", this.$route.query.id);
      }
    });
    // console.log(this.$store.state.exam);
  },
  // components: {
  //   NavBar,
  // },
  computed: {
    ...mapState("exam", {
      time: (state) => {
        let date = state.time;
        let h = parseInt(date / 3600000);
        date %= 3600000;
        let m = parseInt(date / 60000);
        date %= 60000;
        let s = parseInt(date / 1000);
        let time = `${h}时${m}分${s}秒`;
        return time;
      },
    }),
  },
  methods: {
    // 激活已经选中的选项
    canChose(answer) {
      if (this.answerList[this.currentNum] != null) {
        let a = this.answerList[this.currentNum];
        if (a.indexOf(answer) != -1) {
          return true;
        } else {
          return false;
        }
      } else {
        return false;
      }
    },
    // 判断题目类型
    judgeType() {
      let type = "";
      switch (this.questionList[this.currentNum].sysExamQuestion.questionType) {
        case "j":
          type = "单选题";
          break;
        case "k":
          type = "多选题";
          break;
        case "l":
          type = "判断题";
          break;
        case "m":
          type = "填空题";
          break;
        case "n":
          type = "简答题";
          break;
        case "r":
          type = "翻译";
          break;
        case "s":
          type = "作文";
          break;
      }
      return type;
    },
    // 开始考试，倒计时进行
    start() {
      this.$store.dispatch("exam/startExam", 2);
    },
    // 选中答案框
    choseAnswer(answer) {
      // 多选题
      if (
        this.questionList[this.currentNum].sysExamQuestion.questionType === "k"
      ) {
        if (this.answerList[this.currentNum] === undefined) {
          this.answerList[this.currentNum] = "";
        }
        if (this.answerList[this.currentNum].indexOf(answer) === -1) {
          this.answerList[this.currentNum] += answer;
        } else {
          this.answerList[this.currentNum] = this.answerList[
            this.currentNum
          ].replace(answer, "");
        }
        // 多选题答案字符串排序
        let a = this.answerList[this.currentNum];
        let b = a.split("");
        b.sort();
        let c = b.join("");
        this.answerList[this.currentNum] = c;
      } else {
        this.answerList[this.currentNum] = answer;
      }
      this.$store.commit("exam/setAnswerList", this.answerList);
      this._watcher.run();
    },

    // 点击上一题
    pre() {
      if (this.currentNum > 0) {
        this.currentNum--;
      }
    },

    // 点击下一题
    next() {
      if (this.currentNum != this.questionList.length - 1) {
        this.currentNum++;
      }
    },

    // 点击题号跳转至该题
    changeNum(index) {
      this.currentNum = index;
    },

    // 提交试卷
    submit() {
      const data = {
        answer: this.answerList,
        paperid: this.$route.query.id,
      };
      this.$confirm("是否要提交试卷?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$store.dispatch("exam/submit", data).then(() => {
            // console.log(1);
            this.$message.success("提交成功");
            this.$router.push("/");
          });
        })
        .catch(() => {});
    },

    // 输入框中的值改变之后触发
    changeInput() {
      this.$store.commit("exam/setAnswerList", this.answerList);
    },
  },
};
</script>

<style lang="scss" scoped>
.question-box {
  min-height: 100vh;
  width: 100%;

  .question {
    width: 1200px;
    margin: 0 auto;
    // background-color: pink;
    margin-top: 20px;

    .title {
      text-align: center;
      font-size: 30px;
      font-weight: 400;
    }

    .question-container {
      .question-num {
        margin-top: 20px;
        font-size: 30px;
        font-weight: 400;
      }

      .question-title {
        margin: 20px 0;
        font-size: x-large;
        color: #495057;
        padding: 0.375rem 0.75rem;
        line-height: 1.5;
        color: #495057;
        background-color: #fff;
        background-clip: padding-box;
        border: 1px solid #ced4da;
        border-radius: 0.25rem;
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
      }

      .answer-item {
        // width: 100%;
        border-radius: 0.25rem;
        cursor: pointer;
        background: #fff;
        border: 1px solid #dcdfe6;
        color: #606266;
        font-size: x-large;
        padding: 0.375rem 0.75rem;
        margin: 20px 0;
        line-height: 1.5;
      }

      .answer-item:focus,
      .answer-item:hover {
        color: #409eff;
        border-color: #c6e2ff;
        background-color: #ecf5ff;
      }

      .chose-answer {
        color: #409eff;
        border-color: #c6e2ff;
        background-color: #ecf5ff;
      }
    }

    .pre-next {
      display: flex;
      width: 100%;
      height: 40px;
      margin-bottom: 20px;
      // float: right;
      justify-content: flex-end;

      .chose {
        display: flex;
        align-items: center;
        padding: 0 20px;
        padding-right: 10px;
        height: 40px;
        // width: 100px;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        margin-right: 10px;
        font-size: 8px;
      }
    }

    .submit {
      // margin: 0 auto;
      display: flex;
      justify-content: center;
    }
  }
}

::v-deep .el-dropdown-menu,
.el-popper {
  display: flex;
  flex-wrap: wrap;
  width: 400px;
  // min-height: 122px;
  height: 140px;
  overflow-y: scroll;

  scrollbar-width: none;
  -ms-overflow-style: none;
  &::-webkit-scrollbar {
    display: none;
  }

  .el-dropdown-menu__item {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    padding: 0;
    margin: 4px;
    border: 1px solid #dcdfe6;
  }
}
</style>
